<template>
  <div class="app-container">
    <!--返回上一步-->
    <div class="back-bar-box mb-30">
      <div class="btn-back" @click="$router.go(-1)"><i class="el-icon-back"></i> 返回</div>
      <div class="line"></div>
      <div class="name">{{$route.name}}</div>
    </div>
    <div>
      <el-form label-position="right">
        <el-form-item :label="item.text" v-for="(item,index) in list" :key="index" label-width="120px">

          <el-input :type="item.itemValue.length<30?'':'textarea'" v-model="item.itemValue"
                    style="width: 500px;" @input="changeItem(index)"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="update()" type="primary">
            保存
          </el-button>
          <el-button @click="$router.replace('/dict/index')">
            取消
          </el-button>
        </el-form-item>
      </el-form>


    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],
        code: this.$route.query.code,
        updateList:[]
      }
    }, created() {
      this.getList()
    },
    methods: {
      //获取列表
      getList() {
        this.api({
          url: `/sys-dict/getDictItemListByCode/${this.code}`,
          method: "get",
        }).then(response => {
          this.list = response //列表
        }) //请求成功
          .catch(error => {
            console.log(error)
          })//请求失败
      },
      update() {
        let updateList =this.updateList.filter(x=>{return x!=null})//处理空元素
        this.api({
          url: `/sys-dict/updateDictItem/${this.code}`,
          method: "post",
          data:updateList
        }).then(response => {
          this.$message.success("操作成功")
        }).catch(error => {
        })//请求失败
      },
      changeItem(index){
        this.updateList[index] = this.list[index]
      }
    }
  }
</script>
